
<template>
  <div>
    <canvas ref="canvas1" id="canvas1"></canvas>
  </div>
</template>
<script setup  lang="ts" >
import { getAssetURL, equipFindOne, getRealm } from '@/utils/index.ts'
import { useWinSize } from '@/utils/win.ts'
import { ref, defineProps, computed, onMounted } from 'vue'
const prop1 = defineProps({
  userList2: Array
})

var canvas1 = null
const size = useWinSize()
onMounted(() => {
  var canvas1 = document.querySelector('canvas1')
  getCancas()
})
var strs = prop1.userList2

var index = 0
var pixs = []

var colors = ['#67C23A', '#67C23A', '#1890ff', '#1890ff', '#1890ff', '#67C23A']
var textcanvas2 = null
var tctx2 = null
var ctx2 = null
let x, y
function getCancas() {
  canvas1.width = size.value.width
  canvas1.height = 290
  ctx2 = canvas1.getContext('2d')
  textcanvas2 = document.createElement('canvas')
  tctx2 = textcanvas2.getContext('2d')
  init()
  setInterval(draw, 10)
}

function textdata(i) {
  var textsize = check(strs[i])
  textcanvas2.width = textsize[0]
  textcanvas2.height = textsize[1]

  tctx2.clearRect(0, 0, textcanvas2.width, textcanvas2.height)
  tctx2.font = '40px Arial'
  tctx2.fillStyle = 'white'
  tctx2.fillText(strs[i], 0, 40)

  return tctx2.getImageData(0, 0, textcanvas2.width, textcanvas2.height)
}

var particalsArray = []
class Partical {
  constructor(x, y) {
    this.x = x
    this.y = y
    this.vy = Math.random() - 1.5
    this.vx = 0.5 - Math.random()
    this.g = 0.01
    this.color = colors[(Math.random() * colors.length) | 0]
    this.wait = 80
  }
  update() {
    if (this.wait < 0) {
      this.x += this.vx * 2
      this.y += this.vy * 2
      this.vy += this.g
    }
    this.wait--
  }
  draw() {
    ctx2.beginPath()
    ctx2.arc(this.x, this.y, 2, 0, Math.PI * 2)
    ctx2.fillStyle = this.color
    ctx2.fill()
  }
}
function init() {
  pixs = textdata(index % strs.length)
  for (var i = 0; i < pixs.data.length / 4; i++) {
    if (pixs.data[i * 4 + 3] != 0) {
      x = (i % textcanvas2.width) * 2 + (canvas1.width - textcanvas2.width * 2) / 2
      y = ((i / textcanvas2.width) | 0) * 2 + (canvas1.height - textcanvas2.height * 2) / 2
      particalsArray.push(new Partical(x, y))
    }
  }
  index++
}
function check(str) {
  var span1 = document.createElement('span')
  span1.className = 'check'
  span1.textContent = str

  span1.style.display = 'inline-block'
  span1.style.fontFamily = 'Arial, Helvetica, sans-serif'
  span1.style.fontSize = '40px'
  document.body.appendChild(span1)
  var w = span1.clientWidth
  var h = span1.clientHeight
  document.body.removeChild(span1)
  return [w, h]
}
function draw() {
  if (canvas1) {
    ctx2.clearRect(0, 0, canvas1.width, canvas1.height)
    for (var i = 0; i < particalsArray.length; i++) {
      var partical = particalsArray[i]
      partical.update()
      partical.draw()
      if (partical.y > canvas1.height) {
        particalsArray.splice(i, 1)
      }
      if (particalsArray.length == 0) {
        init()
      }
    }
  }
}
</script>
